<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('distributedEnter.pageTitle')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="distributed">
				<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x distributed-head">
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text" style="width:300rpx">{{$t('distributedEnter.distributed') }}</text>
						<view class="gui-form-body gui-text-right">
							<input type="text" class="gui-form-input gui-text-right" v-model="data.oddNum"
								:placeholder="$t('distributedEnter.placeholderText')" />
						</view>
					</view>
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text" style="width:300rpx">{{$t('distributedEnter.materialCode') }}</text>
						<view class="gui-form-body gui-text-right">
							<input type="text" class="gui-form-input gui-text-right" v-model="data.materialCode"
								:placeholder="$t('materials.pleaseMaterialcode')" />
						</view>
					</view>
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text">{{ $t('distributedEnter.date') }}</text>
						<view class="gui-form-body gui-text-right" @click="dateChoose">
							<view class="gui-form-input gui-text-right" v-if="data.chooseTime.length">
								<text>{{ data.chooseTime[0] }}</text> <text v-if="data.chooseTime[1]"> -
									{{ data.chooseTime[1] }}</text>
							</view>
							<input v-else type="button" class="gui-form-input gui-text-right"
								:placeholder="$t('distributedEnter.placeholderTextChoose')" />
						</view>
					</view>
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text">{{ $t('smashRemoval.completionStatus') }}</text>
						<view class="gui-form-body gui-text-right" style="overflow: visible;">
							<superweiCombox style="text-align: right;" :candidates="data.selectList"
								:placeholder="$t('distributedOut.placeholder')" :isJSON="true" keyName="name"
								@select="select" v-model="data.selectText" :defaultValue="$t('smashRemoval.all')">
							</superweiCombox>
						</view>
					</view>
					<view class="gui-form-item gui-border-b gui-flex gui-justify-content-center">
						<view class="gui-flex gui-space-between gui-align-items-center"
							style="width: 70%;height: 100rpx;">
							<button type="default" class="gui-button gui-button-mini gui-bg-black4 gui-noborder"
								style="width:200rpx;" @click="reset">
								<text class="gui-block gui-color-black gui-button-text-mini gui-icons">{{$t('distributedEnter.reset') }}</text>
							</button>
							<button type="default" class="gui-button gui-button-mini gui-bg-blue gui-noborder"
								style="width:200rpx;" @click="search">
								<text class="gui-block gui-color-white gui-button-text-mini gui-icons">{{$t('distributedEnter.search') }}</text>
							</button>
						</view>
					</view>
				</view>
				<!-- 筛选按钮 ,做完成和未完成的筛选-->

				<!-- 底部显示区域 -->
				<scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll" @scrolltolower="scrolltolowerFn">
					<view style="height: 15rpx"></view>
					<view class="card-boxCustom" v-for="(x, i) in data.list" @click="goPage(x)" :key="i">
						<view class="card-head">
							<text>{{ $t('JsInternational.distributedCall') }}：{{ x.docNo }}</text>
							<gui-tags v-if="x.remainQTy>0" :text="$t('distributedEnter.statusNo')"
								:customClass="['gui-transparent-bg', 'gui-color-blue']" :width="80" :lineHeight="2.5"
								:size="12" borderColor="#008AFF"></gui-tags>
							<gui-tags v-else :text="$t('distributedEnter.statusOk')"
								:customClass="['gui-transparent-bg', 'gui-color-green']" :width="80" :lineHeight="2.5"
								:size="12" borderColor="#39B55A"></gui-tags>
						</view>
						<view class="card-body" style="padding-bottom: 15rpx;">
							<!-- 展开按钮 -->
							<view class="card-rotating card-rotating-top" @click.stop="openClick(i)">
								<!-- <uni-icons type="bottom" color="#9C9C9C" size="20"></uni-icons> -->
								<uni-icons v-if="!data.listShow[i]" type="bottom" color="#9C9C9C" size="20"></uni-icons>
								<uni-icons v-if="data.listShow[i]" type="top" color="#9C9C9C" size="20"></uni-icons>
							</view>
							<!-- card的内容 -->
							<view class="card-body-item">
								<text class="body-item-title">{{ $t('distributedEnter.date') }}：</text>{{ x.stepOutDate
								}}
							</view>
							<view class="card-body-item">
								<text class="body-item-title">{{ $t('distributedEnter.compiler') }}：</text>
								{{ x.createUserName }}
							</view>
							<view class="card-body-item">
								<text class="body-item-title">{{ $t('distributedEnter.totalQty') }}：</text>
								{{ x.totalOutQty }}
							</view>
							<!-- <view class="card-body-item">
								<text class="body-item-title">{{ $t('locationBarcodeInfo.orderNo') }}：</text>
								{{ x.salesOrder }}
							</view> -->
						</view>
						<!-- 多个物料的时候有展开,一个的时候没有下面的模块,包括展开按钮都不需要 -->
						<view class="card-body-folding" v-show="data.listShow[i]" v-if="x.wmsStepOutDetails.length > 0">
							<view class="gui-border-t gui-padding" v-for="(item, i) in x.wmsStepOutDetails" :key="i">
								<view class="card-body-item">
									<text class="body-item-title">{{ $t('taskList.contractNumber') }}：</text>
									{{ item.attribute1 }}
								</view>
								<view class="card-body-item">
										<text class="body-item-title">{{ $t('distributedEnter.materialName') }}：</text>
										{{ item.materialName }}
								</view>
								<view class="card-body-item">
									<view class="card-item-50" style="width: 100%;">
										<text class="body-item-title">{{ $t('distributedEnter.materialCode') }}：</text>
										{{ item.materialCode }}
									</view>
								</view>
								<view class="card-body-item">
									<view class="card-item-50" style="width: 100%;">
										<text class="body-item-title">{{ $t('distributedEnter.uom') }}：</text>
										{{ item.unit }}
									</view>
								</view>
								<view class="card-body-item">
									<view class="card-item-50" style="width: 100%;">
										<text class="body-item-title">{{ $t('distributedEnter.qty') }}：</text>
										{{ item.outQty }}
									</view>
								</view>
								<view class="card-body-item">
									<view class="card-item-50" style="width: 100%;">
										<text class="body-item-title">{{ $t('materials.quantityInStorage') }}：</text>
										{{ item.inQty || 0 }}
									</view>
								</view>
								<view class="card-body-item">
									<view class="card-item-50" style="width: 100%;">
										<text class="body-item-title">{{ $t('distributedEnter.intransDamageQty')
											}}：</text>
										{{ item.lossQty || 0 }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="data.noticeHooks" class="noticeHooks">
						{{ data.list.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without') }}
					</view>
				</scroll-view>
			</view>
			<calendarCustom ref="calendarCustomRef" @setTime="getTime" :selectTime="data.chooseTime"></calendarCustom>
		</template>
	</gui-page>
</template>
<script setup>
import searchCustom from '@/components/searchCustom';
import calendarCustom from '@/components/calendarCustom';
import superweiCombox from '@/components/superweiCombox';
import { onShow } from '@dcloudio/uni-app';
import openView from '@/components/common/openView';
import { useI18n } from 'vue-i18n';
import { basPdaOperationLogFn } from '@/utils/index.js';
import { OPERATION_SEARCH, OPERATION_REASCT, OPERATION_LOOK, OPERATION_CHOOSE } from '@/constant/index.js'
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import { selectStepoutH } from '@/api/api.js'
import graceJS from "@/Grace6/js/grace.js";
import { navigate } from '@/utils/routerSkip.js';
import { useStore } from "vuex";

let store = useStore();
const { t } = useI18n();
const { ctx } = getCurrentInstance();
let calendarCustomRef = ref(null);

components: {
	searchCustom,
		superweiCombox,
		calendarCustom,
		openView
}

let data = reactive({
	list: [],
	chooseTime: [],
	oddNum: '',
	materialCode: '',
	selectList: [{
		id: '',
		name: t('smashRemoval.all')
	}, {
		id: 'noComplete',
		name: t('distributedEnter.statusNo')
	}, {
		id: 'complete',
		name: t('distributedEnter.statusOk')
	}],
	selectId: '',
	selectText: t('smashRemoval.all'),
	listShow: [],
	page: 1,
	rows: 10,
	operationType: '',
	isFinish: false,
	isLoading: false,
	noticeHooks: false, //暂无相关数据标识
});


onMounted(() => {
	getSystemTimeRequest()
})
onShow(() => {
	// 请求列表接口
	data.operationType = OPERATION_LOOK
	data.page = 1
	getSystemTimeRequest()
	// 清除调入数组
	store.commit('clearTransferredList')
})

const getSystemTimeRequest = () => {
	store.dispatch('getSystemTimeRequest')
		.then(res => {
			if (res.length) {
				data.chooseTime.push(res)
				selectStepoutHFn()
			}
		})
}
const selectStepoutHFn = () => {
	let start=''
	let end=''
	if (data.chooseTime.length>0) {
		start = data.chooseTime[0] + ' 00:00:00'
		end= data.chooseTime[1] ? data.chooseTime[1]+ ' 23:59:59' : (data.chooseTime[0] || '') + ' 23:59:59'
	}
	let parmes = {
		startTime: start,
		endTime: end,
		stepOutStatus: data.selectId,
		stepOutCode: data.oddNum,
		materialCode: data.materialCode,
		current: data.page,
		size: data.rows,
		id: 0
	}
	selectStepoutH(parmes).then(res => {
		try {
			let inputParameter = JSON.stringify(parmes)
			let returnParameter = JSON.stringify(res)
			let operationPicture = '分布式调入'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode: res.code,//返回状态
				errorMessage: res.msg,//错误信息
				isPass: res.code == 0 ? 'Y' : 'N',//是否成功 Y N
				operationType: data.operationType,
				module: 'WMS',
				source: "PDA",
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
		}
		data.isLoading = false;
		if (res.code == 0) {
			// data.list = res.data.rows;
			// data.total = res.data.total;
			const { records } = res.data;
			data.noticeHooks = false
			if (records.length) {
				records.forEach(x => {
					records.listShow = false
				})
			}

			if (data.page == 1) {
				if (records.length == 0) {
					data.noticeHooks = true
				}
				data.list = records
			} else {

				data.list.push(...records)
			}
			data.noticeHooks = data.list.length >= res.data.total;
			data.isFinish = data.list.length >= res.data.total;
		} else {
			uni.showToast({ title: res.msg, icon: 'none' })
		}
	})
}



const openClick = (index) => {
	data.listShow[index] = !data.listShow[index]
}
// 下拉加载
const scrolltolowerFn = () => {
	console.log(data.isFinish, 'data.isFinishdata.isFinish')
	if (!data.isFinish && !data.isLoading) {
		data.page++
		data.isLoading = true;
		selectStepoutHFn()
	}
}
// 校验状态的选择事件
const select = (e) => {
	data.selectId = e.id;
}
const goPage = (x) => {
	console.log()
	if (x.remainQTy==0) return uni.showToast({ title: t('pageTranslation.theDocumentHas'), icon: 'none' })
	try {
		let inputParameter = x.docNo
		let returnParameter = '无'
		let operationPicture = '分布式调入'
		let callInterface = '无'
		let opertionParmes = {
			inputParameter,
			returnParameter,
			operationPicture,
			callInterface,
			responseCode: '无',//返回状态
			errorMessage: '无',//错误信息
			isPass: 'Y',//是否成功 Y N
			operationType: OPERATION_CHOOSE,
			module: 'WMS',
			source: "PDA",
		}
		basPdaOperationLogFn(opertionParmes)
	} catch (error) {

	}
	navigate({
		url: `/pages/distributed/distributedEnterDetailNew?id=${x.id}`
	})
}
const search = () => {
	data.page = 1
	data.operationType = OPERATION_SEARCH
	selectStepoutHFn()
}
const reset = () => {
	data.operationType = OPERATION_REASCT
	data.chooseTime = []
	data.oddNum = '';
	data.selectId = '';
	data.materialCode = '';
	data.selectText = t('smashRemoval.all');//t('smashRemoval.all')国际化全部
	selectStepoutHFn()

}
const dateChoose = () => {
	calendarCustomRef.value.open();
}
const getTime = (times) => {
	data.chooseTime = times;
}
</script>
<style lang="scss" scoped>
.distributed-head {
	border-bottom-left-radius: 16rpx;
	border-bottom-right-radius: 16rpx;
}

.scroll {
	flex: 1;
	height: 2rpx;
}

.distributed {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 88rpx);
	// height: 100vh;
}

.card-box {
	margin: 0 15rpx;
	box-shadow: 0rpx 0rpx 4rpx 0 #A5A5A5;
	background: #fff;
	padding: 30rpx;
	border-radius: 16rpx;
}

.card-item {
	line-height: 60rpx;
}

.card-bottom {
	margin-bottom: 30rpx;
}

.filtrate-item {
	display: flex;
	align-items: center;
	font-size: 32rpx;
	margin-bottom: 20rpx;

	.filtrate-itemLeft {
		height: 32rpx;
		line-height: 32rpx;
		width: 100rpx;
	}

	.filtrate-itemRight {
		border: 2rpx solid #A5A5A5;
		border-radius: 8rpx;
		overflow: hidden;
		line-height: 40rpx;
		width: 300rpx;
	}
}

// 展开按钮样式
.card-rotating-top {
	margin-top: 10rpx;
}

.card-selectCustom {
	margin: 0.46875rem 0.625rem;
	box-shadow: 0 0 0.125rem 0 #a5a5a5;
	background: #fff;
	padding: 0.375rem 0.75rem;
	border-radius: 0.5rem;
	position: relative;
	height: 70rpx;
}
</style>
s